<template>
  <div class="person">
    <h1>姓名: {{ name }}</h1>
    <h1>年龄: {{ age }}</h1>
    <button @click="updateName">修改名字</button>
    <button @click="updateAge">修改年龄</button>
    <button @click="showtel">电话</button>

    <hr>
    <h1>{{a}}</h1>
    <h1>{{c}}</h1>
    <button @click="b">电话</button>
  </div>
</template>

<script lang="ts">
export default {
  beforeCreate() {
    console.log("beforeCreate")
  },
  data() {
    return {
      a : 100,
      c : this.name
    }
  },
  methods: {
    b() {
      alert("b")
    }
  },
  setup() {
    // console.log(this) undefined, Vue3中已经弱化了this了
    // 数据 
    let name = "张三" // 注意此时的name不是响应式
    let age = 23 // 注意此时的age不是响应式的
    let phone = "13632462107" // 注意此时的tel不是响应式的

    function updateName() {
      name = "李四"; // 注意： 这样修改name, 页面是没有变化的
      console.log(name); // name确实改了，但是name不是响应式的
    } 

    function updateAge() {
      age +=1;// 注意： 这样修改age, 页面是没有变化的
      console.log(age);// age确实改了，但是age不是响应式的
    }

    function showtel() {
      alert(phone);// 注意： 这样修改phone, 页面是没有变化的
      console.log(phone);// phone确实改了，但是phone不是响应式的
    }
    return {name, age, updateName, updateAge, showtel }
    // return ()=> 'haha'
  }
}
</script>
<style>
.person {
  background-color: #ddd;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 20px;
}

button {
  margin: 5px;
}
</style>